<template>
	<view class="head" :style="{height:navHeight*2 + 'rpx',top:76+ 'rpx'}">
		 <view class="app-use"><text>{{navTitle}}</text></view>
		 <view class="search">
			<u-search :actionText='text' bgColor='#fff'  placeholder="搜索 应用消息新闻"></u-search>
		 </view>
		 <view class="sleep"><image src=""></image></view>
		 <view class="meg"><image src=""></image></view>
	</view>
</template>

<script>
	export default {
		name:"Ceiling",
		data() {
			return {
				text:''
			};
		},

		props:['navHeight','navTitle']
	}
</script>

<style scoped lang="scss">
.head{
	display: flex; 
	padding: 20rpx 40rpx;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	gap: 20rpx;
	position: fixed;
	left: 0rpx;
	bottom: 0rpx;
	right: 0rpx;
	z-index: 999;
	box-shadow: 0px 8rpx 10rpx 0px rgba(0, 0, 0, 0.1) !important;
	background-color: #fff;
	.app-use{
		flex: 1;

		text{
			color: rgb(16, 16, 16);
			font-size: 16px;
			font-family: PingFangSC;
			font-weight: 600;
		}
	}
	.search{
		flex:7 ;
		box-shadow: 0px 8rpx 10rpx 0px rgba(0, 0, 0, 0.1) !important; 
		border-radius: 20rpx;
		
	}
	.sleep{
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1;
		image{
			width: 40rpx;
			height: 40rpx;
		}
	}
	.meg{
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1;
		image{
			width: 40rpx;
			height: 40rpx;
		}
	}
	
}

</style>